// HEADER AND MENU HTML
// -------------------------------------------------------------------------

#header

    // The menu containing navigation options.
    #menu
        if roles.admin || roles.mapcreate
            a#menu-createmap.menu-item(href="#createmap", title="Click to create a new map.") Create Map
        a#menu-maps.menu-item(href="#maps", title="View and open available maps.") Maps...
        a#menu-entities.menu-item(href="#entities", title="Open the Entities Manager.") Entities
        a#menu-variables.menu-item(href="#variables", title="Open the Variables Manager.") Variables
        a#menu-auditdata.menu-item(href="#auditdata", title="Open the Audit Data manager.") Audit Data
        a#menu-auditevents.menu-item(href="#auditevents", title="Open the Audit Events manager.") Audit Events
        a#menu-settings.menu-item(href="#settings", title="Open the Settings dialog.") Settings
        a#menu-help.menu-item(href="#help", title="Open the online Q&A and help center.") Help

        // The "Audit Data / alerts auto update" switch.
        .autoupdate
            img#top-img-autoupdate(src="images/ico-refresh.png", title="Audit data auto-update enabled")
            label.toggle(for="map-ctl-autoupdate", title="When on, audit data will get bound to the map automatically every X seconds")
                input#map-ctl-autoupdate(type="checkbox", name="map-ctl-autoupdate",checked="checked")
                span

        // The "Edit ON/OFF" switch, which is shown only if the user has the necessary permissions.
        .lock
            img#top-img-lock(src="images/ico-locked.png", title="Map edit lock")
            label.toggle(for="map-ctl-editable", title="When on, map will be locked")
                input#map-ctl-editable(type="checkbox", name="map-ctl-editable",checked="checked")
                span

        // The maps are bound inside this submenu div, which is shown and hidden dynamically
        // when mouse hovers the "Maps" menu. Position is fixed.
        #submenu-items

// The fullscreen and refresh icons that sits on the top right of the screen.
img#top-img-fullscreen(src="images/ico-hidecontrols.png", title="Click to enable fullscreen mode.")